<template>
  <div class="login">
    <div class="logo">
        <img src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png" alt="">
    </div>
    <div class="user-login">
        <input type="text" v-model="phone" placeholder="请输入手机号">
        <input type="text" v-model="yzm" placeholder="请输入验证码">
        <div class="getYanzhengma" @click = "getYzm">{{msg}}</div>
        <div class="submit" @click = "login">登录</div>
    </div>
  </div>
</template>

<script>
import {Toast, MessageBox} from 'mint-ui'
import axios from 'axios'
export default {
  name: 'login',
  data () {
    return {
      phone: '',
      yzm: '',
      msg: '获取验证码'
    }
  },
  methods: {
    getYzm () {
      var reg = /^\d{11}$/
      var isPhone = reg.test(this.phone)
      if (isPhone) {
        var timeEnd = 30
        var time = setInterval(() => {
          timeEnd--
          if (timeEnd > 0) {
            this.msg = '剩余' + timeEnd + '秒'
          } else {
            clearInterval(time)
            this.msg = '重新获取'
          }
        }, 1000)
        axios.get('/user/getYzm', {
          params: {
            phone: this.phone
          }
        }).then(function (res) {
          MessageBox({
            title: '验证码',
            message: '您的验证码为' + res.data.yzm,
            closeOnClickModal: true,
            messageClass: 'yzmClass'
          })
          console.log(res)
        })
      } else {
        Toast({
          message: '请输入正确的手机号',
          position: 'middle',
          duration: 1000,
          className: 'errorInfo'
        })
      }
    },
    login () {
      var _this = this
      axios.post('/user/login', {
        params: {
          phone: this.phone,
          yzm: this.yzm
        }
      }).then(function (res) {
        if (res.data.status === 0) {
          console.log(res.data.userId)
          localStorage.setItem('user', JSON.stringify(res.data.userId))
          _this.$store.commit('changeUserId', res.data.userId)
          if (_this.$route.query.redirect) {
            _this.$router.replace(_this.$route.query.redirect)
          } else {
            _this.$router.replace('/center')
          }
        } else {
          Toast({
            message: '验证码错误',
            position: 'middle',
            duration: 1000,
            className: '.errorInfo'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import 'mint-ui/lib/style.css';
@import '@/styles/common/px2rem.scss';
.login{
    display: flex;
    flex-direction: column;
    .logo{
        margin-top: px2rem(80);
        text-align: center;
        display: flex;
        justify-content: center;
        img{
            width: px2rem(60);
            height: px2rem(60);
        }
    }
    .user-login{
        width: px2rem(375);
        height: px2rem(225);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        input{
            width: 100%;
            width: px2rem(325);
            height: px2rem(55);
            border: 0;
            border-bottom: 1px solid #ccc;
            font-size: px2rem(18);
        }
        .getYanzhengma{
            width: px2rem(90);
            height: px2rem(30);
            text-align: center;
            line-height: px2rem(30);
            font-size: px2rem(16);
            position: absolute;
            top: px2rem(25);
            left: px2rem(265);
        }
        .submit{
            margin-top: px2rem(50);
            width: px2rem(325);
            height: px2rem(44);
            text-align: center;
            line-height: px2rem(44);
            background-color: #ff5f16;
            color: #fff;
            font-size: px2rem(20);
        }
    }
}
.mint-toast-text{
  font-size: px2rem(18);
}
.mint-msgbox-message{
  font-size: px2rem(16);
}
.mint-msgbox-title{
  font-size: px2rem(16);
}
.mint-msgbox-btns{
  height: px2rem(30);
}
.mint-msgbox-btn{
  font-size: px2rem(16);
}
</style>
